<template>
  <BaseMainSlot>
    <template v-slot:searchbox>
      <div class="label-input mr-20">
        <div class="label">个体名称:</div>
        <div class="input">
          <el-select v-model="condition.name" clearable filterable placeholder="请选择">
            <el-option
              v-for="(item, index) in bionIdList"
              :key="index + 'bionId'"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </div>
      </div>
      <div class="label-input mr-20">
        <div class="label">耳标:</div>
        <div class="input">
          <el-input v-model="condition.eagTag" clearable placeholder="请输入耳标" />
        </div>
      </div>
      <div class="label-input mr-20">
        <div class="label">合养时间段:</div>
        <div class="input">
          <el-date-picker v-model="condition.startDate" value-format="timestamp" type="datetime" placeholder="请选择开始时间" />
        </div>
      </div>
      <div class="label-input mr-20">
        <div class="input">
          <el-date-picker v-model="condition.endDate" value-format="timestamp" type="datetime" placeholder="请选择结束时间" />
        </div>
      </div>
      <div class="search ml-20">
        <img src="~@/assets/action-bar-icon/search.png" @click="queryInfo" />
      </div>
    </template>
    <template v-slot:content>
      <el-table :data="tableData" border stripe max-height="88%">
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column label="序号" type="index" width="80" />
        <el-table-column label="公羊信息" prop="males">
          <template slot-scope="scope">
            <div>
              <span v-for="(item,index) in scope.row.maleNameList" :key="index+'maleName'">
                <span class="title color" @click="checkRamInformation(item)">{{ item.name }}</span>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="母羊信息" prop="females">
          <template slot-scope="scope">
            <div>
              <span v-for="(item,index) in scope.row.femaleNameList" :key="index">
                <span class="title color" @click="checkeweInformation(item)">{{ item.name }}</span>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="合养设施" prop="totalFacilityName" width="200" />
        <el-table-column label="怀孕母羊信息" prop="pregnantIdList">
          <template slot-scope="scope">
            <div>
              <span v-for="(item,index) in scope.row.pregnantNameList" :key="index">
                <span class="title color" @click="checkeweInformation(item)">{{ item.name }}</span>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="合养持续时间">
          <template slot-scope="scope">
            <span>{{ `${(formatDateTime(scope.row.startDate))}-${(formatDateTime(scope.row.endDate))}` }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="公羊信息管理" :visible.sync="romInformationDialog">
        <el-form :model="romInfo" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="公羊来源:">
                <el-input v-model="romInfo.source" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="关联批次:">
                <el-input v-model="romInfo.batchNo" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="公羊名称:">
                <el-input v-model="romInfo.name" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公羊编号:">
                <el-input v-model="romInfo.number" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="被毛类型:">
                <el-input v-model="romInfo.clothingHair" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="养殖设施:">
                <el-input v-model="romInfo.facilityName" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="年龄:">
                <el-input v-model="romInfo.birthday" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="体重:">
                <el-input v-model="romInfo.weight" type="number" placeholder="请输入体重（斤）" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer">
          <el-button type="primary" class="model-submit-btn" @click="romInformationDialog=false">确定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="母羊信息管理" :visible.sync="eveInformationDialog">
        <el-form :model="eweInfo" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="母羊来源:">
                <el-input v-model="eweInfo.source" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="关联批次:">
                <el-input v-model="eweInfo.batchNo" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="母羊名称:">
                <el-input v-model="eweInfo.name" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="母羊编号:">
                <el-input v-model="eweInfo.number" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="被毛类型:">
                <el-input v-model="eweInfo.clothingHair" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="养殖设施:">
                <el-input v-model="eweInfo.facilityName" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="年龄:">
                <el-input v-model="eweInfo.birthday" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="体重（斤）:">
                <el-input v-model="eweInfo.weight" type="number" placeholder="请输入体重" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer">
          <el-button type="primary" class="model-submit-btn" @click="eveInformationDialog=false">确定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="怀孕母羊信息管理" :visible.sync="pregnantEveInformationDialog">
        <el-form :model="eveInfo" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="母羊来源:">
                <el-input v-model="eveInfo.source" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="母羊品种:">
                <el-input v-model="eveInfo.plantVarietyName" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="被毛类型:">
                <el-input v-model="eveInfo.clothingHair" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="年龄:">
                <el-input v-model="eveInfo.birthday" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="体重（斤）:">
                <el-input v-model="eveInfo.weight" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer">
          <el-button type="primary" class="model-submit-btn" @click="pregnantEveInformationDialog=false">确定</el-button>
        </div>
      </el-dialog>
      <Pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :total-size="totalNumber"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />
    </template>
  </BaseMainSlot>
</template>

<script>
import Pagination from "@/components/Pagination";
import BaseMainSlot from "@/components/BaseMainSlot/baseone.vue";
import req from "@/api/digital-production/breeding-management/Individual-mating-record/index";

import { mymixin } from "@/utils/mixin";
export default {
  name: "IndividualMatingRecord",
  components: {
    Pagination,
    BaseMainSlot
  },
  mixins: [mymixin],
  data() {
    return {
      totalNumber: 0,
      tableData: [],
      queryName: null,
      queryID: null,
      romInformationDialog: false,
      romInfo: {},
      eweInfo: {},
      eveInformationDialog: false,
      pregnantEveInformationDialog: false,
      eveInfo: {},
      startDate: null,
      result: null,
      clothingHairList: [
        { name: "棉毛型", value: "LINTER" },
        { name: "沙毛型", value: "ROAN" },
        { name: "中间型", value: "MIDDLE" }
      ],
      bionIdList: [],
      condition: {
        breed: "HuSheep",
        eagTag: "",
        endDate: "",
        name: "",
        startDate: ""
      }
    };
  },
  created() {
    this.pagingQuery();
    this.queryBionAll();
  },
  methods: {
    //  获取所有羊的的信息
    queryBionAll() {
      req
        .queryBionAll({
          breed: "HuSheep"
        })
        .then(res => {
          if (res.code === 1) {
            this.bionIdList = res.data || [];
          }
        });
    },
    // 查询个体信息
    getInfo(val) {
      req.getQueryBionById(val).then(res => {
        if (res.code === 1) {
          this.result = res.data;
        }
      });
    },
    checkRamInformation(val) {
      req.getQueryBionById(val.bionId).then(res => {
        if (res.code === 1) {
          this.result = res.data;
          this.romInfo = this.result;
          this.clothingHairList.forEach(item => {
            if (item.value === this.result.clothingHair) {
              this.romInfo.clothingHair = item.name;
            }
          });
          if (this.romInfo.source === "PURCHASE") {
            this.romInfo.source = "外部购买";
          } else {
            this.romInfo.source = "内部繁殖";
          }
          this.romInformationDialog = true;
        }
      });
    },
    checkeweInformation(val) {
      req.getQueryBionById(val.bionId).then(res => {
        if (res.code === 1) {
          this.result = res.data;
          this.eweInfo = this.result;
          this.clothingHairList.forEach(item => {
            if (item.value === this.result.clothingHair) {
              this.eweInfo.clothingHair = item.name;
            }
          });
          if (this.eweInfo.source === "PURCHASE") {
            this.eweInfo.source = "外部购买";
          } else {
            this.eweInfo.source = "内部繁殖";
          }
          this.eveInformationDialog = true;
        }
      });
    },
    pagingQuery() {
      // let time = this.formatDateTimeMHS(this.startDate)
      req
        .postPageIndividualMatingRecordQuery({
          page: this.currentPage,
          size: this.pageSize
        })
        .then(res => {
          let result = res.data || {};
          this.totalNumber = result.totalElements;
          result = result.content || [];
          this.tableData = result;
        });
    },
    queryInfo() {
      req
        .postPageIndividualMatingRecordQuery({
          page: this.currentPage,
          size: this.pageSize,
          entity: this.condition
        })
        .then(res => {
          let result = res.data || {};
          this.totalNumber = result.totalElements;
          result = result.content || [];
          this.tableData = result;
        });
    },

    // 分页功能实现
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.pagingQuery();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.pagingQuery();
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
::v-deep .el-dialog__body {
  background: #f0f3f7;
  .el-input {
    width: 200px;
  }
}
::v-deep .el-table {
  overflow: auto;
}
.title {
  margin-left: 5px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
.color{
  cursor: pointer;
  color: #33bad4;
  border-bottom:1px solid #33bad4;
}
// 弹框底下按钮样式
.model-submit-btn{
background-color: #006e91;
    border-color: #006e91;
    &:hover{
      background-color: #006f91b9;
    border-color: #006f91b9;
    }
}
.model-cancel-btn{
  &:hover{
      background-color: #006f9128;
    border-color: #006e91;
    color:#006e91
    }
}
</style>
